<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">

            // Load the Visualization API.
            google.load('visualization', '1.0', {'packages': ['corechart']});
            // Despues de cargado el API.
            google.setOnLoadCallback(doit);

            //declaracion de variables
            var data;
            var chart;
            var options;
            var ca_ini = -1;
            var ca_pro = -1;


            function doit() {
                drawChart();
            }

            function drawChart() {
                // Create the chat model.
                chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
                // Create the data table.
                data = new google.visualization.DataTable();
                data.addColumn('datetime', 'minutos');
                data.addColumn('number', 'puntos');

                var time = new Date().getTime();
                var minuto = 60000;


                for (var i = 59; i > 0; i--) {
                    data.addRow([new Date(time - (minuto * i)), 0]);
                }
                data.addRow([new Date(time), 0]);
                console.log(">" + data.length + ":" + data.getNumberOfRows());
                options = createoptions('SD3   0 puntos   0 unidades');
                chart.draw(data, options);
                //codigo especial para la emulación de dinamismo
                setInterval(refreshdata, 2 * 1000)
            }

            function createoptions(title) {
                return {
                    title: title,
                    titlePosition: 'right',
                    titleTextStyle: {
                        fontSize: 24,
                        bold: true,
                        position: 'Right'
                    },
                    width: 1000,
                    height: 300,
                    chartArea: {
                        left: 50,
                        top: 30,
                        width: '940',
                        height: '250',
                        backgroundColor: {
                            stroke: 'black',
                            strokeWidth: 1
                        }
                    },
                    hAxis: {
                        baselineColor: ' #ff0000',
                        gridlines: {
                            color: '#cdcdcd',
                            count: 20
                        },
                        textStyle: {
                            fontSize: '10'
                        },
                        format: 'hh:mm'
                    },
                    vAxis: {
                        minValue: 0,
                        viewWindowMode: 'explicit',
                        viewWindow: {min: 0},
                        gridlines: {
                            count: -1,
                            ticks: [0, 2, 4]
                        },
                        textStyle: {
                            fontSize: '10',
                            bold: true
                        },
                        format: '#'
                    },
                    legend: {
                        position: 'none'
                    }
                };
            }

            function refreshdata() {
                var json = JSON.parse($.ajax({
//                    url: "http://192.168.100.131:8080/GPS/info?xact=2",
//                    url: "http://sd3.accesocrediticio.com:7070/GPS/info?xact=2",
                    url: "http://tk3.accesocrediticio.com:8082/GPS/info?xact=2",
                    dataType: "json",
                    type: "get",
                    async: false
                }).responseText);

                var date0 = data.getValue(59, 0).getMinutes();
                var date = new Date(json.fe_sergps);
                var date1 = date.getMinutes();
                var vpuntos = json.ca_pungps;
//                console.log("comparando:" + date1 + ">" + date0);
                if (ca_ini == -1) 
                    ca_ini = vpuntos;

                if (date1 > date0) {
                    data.removeRow(0);
                    var ca_extra = parseInt(((vpuntos - ca_ini) - ca_pro) / 2);
                    ca_pro = ca_pro + ca_extra;
                    data.addRow([date, ca_pro]);
                    ca_ini = vpuntos - ca_extra;
                    console.log("> ejecutando esto:" + ca_pro);
                } else {
                    ca_pro = vpuntos - ca_ini;
                    data.setValue(59, 0, date);
                    data.setValue(59, 1, ca_pro);
                    console.log("< ejecutando esto:" + ca_pro);

                }

                options = createoptions('TK3   ' + ca_pro + ' puntos   ' + json.ca_disgps + ' unidades');
                chart.draw(data, options);
            }
        </script>
        <title>Viewer</title>
    </head>

    <body>
        <div id="chart_div"></div>
        <div id="chart_div2" style="background-color: #ccccdd"></div>
    </body>
</html>